<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>阿婆猪女装记录</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="spin.css">
  <style>
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://shc7432.github.io/public/getLinkInput/getLinkInput.js"></script>
  <script src="spin.js"></script>
<script src="https://shc0743.github.io/crypto-js/core.js"></script>
<script src="https://shc0743.github.io/crypto-js/enc-base64.js"></script>
<script src="https://shc0743.github.io/crypto-js/enc-hex.js"></script>
<script src="https://shc0743.github.io/crypto-js/enc-utf8.js"></script>
<script src="https://shc0743.github.io/crypto-js/enc-utf16.js"></script>
<script src="https://shc0743.github.io/crypto-js/crypto-js.js"></script>
<script src="https://shc0743.github.io/crypto-js/aes.js"></script>
<script src="https://shc0743.github.io/crypto-js/md5.js"></script>
<script src="https://shc0743.github.io/crypto-js/sha1.js"></script>
<script src="https://shc0743.github.io/crypto-js/sha512.js"></script>
<script src="https://shc7432.github.io/public/something/sometool.js"></script>
  <script src="https://shc7432.github.io/public/something/sometool.js"></script>
  <script>
  $( function() {
    var dialog, form,
 
      // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
      emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
      uname = $( "#uname" ),
      name = $( "#name" ),
      email = $( "#email" ),
      password = $( "#password" ),
      allFields = $( [] ).add( name ).add( email ).add( password ),
      tips = $( ".validateTips" );
 
    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }
 
    function addUser() {
      var valid = true;
      valid=valid&&(name.val()!="")
      valid=valid&&(email.val()!="")
      valid=valid&&(password.val()!="")
      allFields.removeClass( "ui-state-error" );
 
      if ( valid ) {
        $( "#users tbody" ).append( "<tr>" +
          "<td>" + uname.val() + "</td>" +
          "<td>" + name.val() + "</td>" +
          "<td>" + email.val() + "</td>" +
          "<td>" + password.val() + "</td>" +
        "</tr>" );
        dialog.dialog( "close" );
      } else {
        o.addClass( "ui-state-error" );
        errorout.innerHTML=( "所有都是必填的" );
        setTimeout('errorout.innerHTML=( "请如实填写" );',2000)
      }
      return valid;
    }
 
    dialog = $( "#dialog-form" ).dialog({
      autoOpen: false,
      modal: true,
      buttons: {
        "确定": addUser,
        "取消": function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
        document.getElementById("uname").value=window.unmev
        allFields.removeClass( "ui-state-error" );
      }
    });
 
    form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      addUser();
    });
 
    $( "#create-user" ).button().on( "click", function() {
      $( "#dialog-form" ).dialog( "open" );
    });
  } );

$(function(){ 
    $( "#login" ).button().on( "click", function() {
      jQuery(".loading").dialog( "open" );
      openloginwin=setTimeout(function(){
        delete openloginwin;
        jQuery(".loading").dialog( "close" );
        //alert(getCookie("signin"))
        if(getCookie("signin")==null||getCookie("signin")==""){
          $( "#dialog-login" ).dialog("open")
        } else {
          uname.value=getCookie("signin")
          window.unmev=getCookie("signin")
          $(".loginsuses").dialog("open")
        }
      },3500)
    });
    $( "#newuserto" ).button().on( "click", function() {
      location.href='https://shc7432.github.io/download/user-center/new/'+'?returnto='+encodeURIComponent(location.href)
    });
 
    lin = $( "#dialog-login" ).dialog({
      autoOpen: false,
      height: "auto",
      width: "auto",
      modal: true,
      buttons: {
        "确定": logi,
        "取消": function() {
          lin.dialog( "close" );
        }
      },
      close: function() {
        return false;
      }
    });

    function logi(){
var unme=(document.getElementById("user").value)
var pwme=CryptoJS.MD5(document.getElementById("pw").value)
if(unme==""||pwme==""){
lotmsg.innerHTML="账号或密码错误<br>"
setTimeout("lotmsg.innerHTML=''",1500)
return;
}
var ud=localStorage.userdata.data
if(ud){
out1=0
} else {
var i,out1=false
for(i=0;i<ud.length;i++){
out1=out1||((unme==ud[i].username)&&(pwme==ud[i].password))
}
}
if(out1){
lotmsg.innerHTML="登录成功!<br>"
uname.value=document.getElementById("user").value
window.unmev=document.getElementById("user").value
setCookie("signin",user.value,120)
setTimeout(function(){lin.dialog( "close" );document.getElementById("login").hidden=true;},2000)
} else {
lotmsg.innerHTML="账号或密码错误<br>"
setTimeout("lotmsg.innerHTML=''",1500)
}
    }
 
    form = lin.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      addUser();
    });

    $(".loading").dialog({
      autoOpen: false,
      closeOnEscape:false,
      open: function(event, ui) {
      //hide close button.
      $(this).parent().children().children('.ui-dialog-titlebar-close').hide();
      },
      modal: true,
      width:"auto",
      buttons: {
        "取消": function(){
          clearTimeout(openloginwin);
          $(this).dialog("close");
        }
      },
      close: function(){
        return false;
      }
    })

    $(".loginsuses").dialog({
      autoOpen: false,
      modal: true,
      buttons:{
        "确定": function(){
          $(this).dialog("close")
        }
      }
    })

})

(function(){
var opts = {
  lines: 12, // The number of lines to draw
  length: 18, // The length of each line
  width: 7, // The line thickness
  radius: 19, // The radius of the inner circle
  scale: 1, // Scales overall size of the spinner
  corners: 1, // Corner roundness (0..1)
  color: '#000000', // CSS color or array of colors
  fadeColor: 'transparent', // CSS color or array of colors
  speed: 1, // Rounds per second
  rotate: 0, // The rotation offset
  animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
  direction: 1, // 1: clockwise, -1: counterclockwise
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  className: 'spinner', // The CSS class to assign to the spinner
  top: '50%', // Top position relative to parent
  left: '50%', // Left position relative to parent
  shadow: '0 0 1px transparent', // Box-shadow for the lines
  position: 'absolute' // Element positioning
};

var target = document.querySelectorAll('loadinloading')[0];
var spinner = new Spinner(opts).spin(target);

return spinner;

})()

  </script>
</head>
<body>
 
<div id="dialog-form" title="新增记录">
  <p class="validateTips" id="errorout">请如实填写</p>
 
  <form>
    <fieldset>
      <label for="uname">账号</label>
      <input type="text" name="uname" id="uname" value="未登录" readonly class="text ui-widget-content ui-corner-all">
      <label for="name">哪个阿婆猪</label>
      <input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all">
      <label for="email">想不想要它女装</label>
      <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
      <label for="password">它有没有女装</label>
      <input type="text" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
 
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>
 
 
<div id="users-contain" class="ui-widget">
  <h1>阿婆猪女装记录:</h1>
  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th>账号</th>
        <th>哪个阿婆猪</th>
        <th>想不想要它女装</th>
        <th>它有没有女装</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>???</td>
        <td>???</td>
        <td>???</td>
        <td>???</td>
      </tr>
    </tbody>
  </table>
</div>
<button id="create-user">新增记录</button>
<button id="login">登录</button>
<button id="newuserto">注册</button>

 <div id="dialog-login" title="登录">

<span id=lotmsg></span>
 
  <form>
    <fieldset>
      <label for="user">账号</label>
      <input type="text" name="name" id="user" value="" class="text ui-widget-content ui-corner-all">
      <label for="pw">密码</label>
      <input type="text" name="email" id="pw" value="" class="text ui-widget-content ui-corner-all">
 
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

<div class="loading" title="正在加载" data-useto="这是dialog窗口,也是里面一层的容器">

<div style="background-color:#090;width:200px;height:200px;">
<div class="loaderinloading">Loading...</div>
<style>
.loaderinloading {
   text-indent: -9999em;
   position: relative;
   width: 200px;
   height: 200px;
   background: #ffffff;

   /*从左向右0~10%位置纯白，10%~50%纯白~透明*/
   background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0)  50%);
   border-radius: 50%;
   box-shadow:inset 0 0 0 20px rgba(255,255,255,.2);
   -webkit-animation: load-effect 1.8s infinite linear;
   animation: load-effect 1.8s infinite linear;
}




/*绘制纯白1/4圆*/

.loaderinloading::before {
   position: absolute;
   content: '';
   width: 50%;
   height: 50%;
   background: #FFF;
   border-radius: 100% 0 0 0;

   
   left:0;
   top:0;
}

 

/*绘制绿色背景内圆，挡住白色*/
.loaderinloading::after  {
   background: #090;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   content: '';
   position: absolute;
   top: 20px;
   left: 20px;
}

@keyframes load-effect {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}
</style>
</div>

</div>

<div class="loginsuses" title="登录成功">
登录成功!
</div>
 
</body>
</html>
